<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '我的',
  },
}
</route>
<template>
  <view class="bg-white overflow-hidden" :style="{ marginTop: safeAreaInsets?.top + 'px' }">
    <view class="top">
      <!--      头像 + 昵称 + 设置-->
      <view
        class="flex flex-row items-center justify-between"
        style="height: 4.31rem; padding: 5.56rem 1.31rem 1.56rem 1.19rem"
      >
        <view class="flex flex-row items-center justify-between">
          <view class="icon-box flex justify-center items-center">
            <img src="@/static/app/custom-icon/mine-icon.svg" alt="" />
          </view>
          <view class="flex flex-col">
            <text class="nickname">匿名用户</text>
            <text class="user-id">ID：3309674066</text>
          </view>
        </view>
        <view class="setting">
          <img src="@/static/app/custom-icon/riLine-settings-3-line 1@1x (1).png" alt="" />
        </view>
      </view>

      <!--      四个数字区域-->

      <view class="flex flex-row justify-around count-menu">
        <view
          v-for="item in count_menu"
          class="flex flex-col justify-between items-center"
          @click="goView"
        >
          <text>{{ item.name }}</text>
          <text>{{ item.value }}</text>
        </view>
      </view>

      <!--      学生认证 -->
      <view class="student-auth flex items-center justify-between">
        <view class="flex">
          <img src="@/static/app/custom-icon/图片 1@1x.png" class="ml-4" alt="" />
          <view class="flex flex-col">
            <text class="auth-text">学生认证</text>
            <text class="auth-text-more">认证后可以享受更多权益</text>
          </view>
        </view>

        <view class="go-auth-btn flex items-center justify-center">
          <text class="go-auth">立即认证</text>
        </view>
      </view>
    </view>

    <!--      底部菜单 -->
    <view class="flex flex-col items-center">
      <view class="flex items-center justify-between bottom-item" v-for="item in menus">
        <view class="flex items-center">
          <img style="margin-left: 0.81rem" :src="item.icon" alt="" />
          <text style="margin-left: 0.69rem">{{ item.name }}</text>
        </view>
        <img style="margin-right: 0.88rem" src="@/static/app/custom-icon/ze-arrow.png" alt="" />
      </view>
    </view>

    <tabbar></tabbar>
  </view>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'Mine',
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// 测试 uni API 自动引入
onLoad(() => {
  // console.log(author)
})
function goView() {
  uni.navigateTo({ url: '/pages/balance/index' })
}
const count_menu = ref([
  {
    name: '余额',
    value: '10.00',
  },
  {
    name: '关注',
    value: '208',
  },
  {
    name: '粉丝',
    value: '208',
  },
  {
    name: '圈子',
    value: '208',
  },
])

// 列表菜单
const menus = ref([
  {
    icon: new URL('@/static/app/custom-icon/menu_free.png', import.meta.url).href,
    name: '闲置发布',
  },
  {
    icon: new URL('@/static/app/custom-icon/menu_like.png', import.meta.url).href,
    name: '我的喜欢',
  },
  {
    icon: new URL('@/static/app/custom-icon/menu_dashang.png', import.meta.url).href,
    name: '我的打赏',
  },
  {
    icon: new URL('@/static/app/custom-icon/menu_address.png', import.meta.url).href,
    name: '我的地址',
  },
  {
    icon: new URL('@/static/app/custom-icon/menu_service.png', import.meta.url).href,
    name: '联系客服',
  },
  {
    icon: new URL('@/static/app/custom-icon/menu_logout.png', import.meta.url).href,
    name: '退出登录',
  },
])
</script>

<style scoped>
.top {
  width: 100%;
  height: 19rem;
  line-height: 1.25rem;
  background: linear-gradient(
    86.39deg,
    rgba(148, 235, 246, 1) 4.39%,
    rgba(135, 218, 255, 1) 64.5%,
    rgba(127, 181, 253, 1) 127.07%
  );

  .nickname {
    height: 1.56rem;
    font-family: SourceHanSansSC-regular;
    font-size: 1.13rem;
    line-height: 1.56rem;
    color: rgba(16, 16, 16, 1);
    text-align: left;
  }

  .user-id {
    font-family: SourceHanSansSC-regular;
    font-size: 0.88rem;
    line-height: 1.25rem;
    color: #4d7786;
  }

  .icon-box {
    width: 4.38rem;
    height: 4.38rem;
    margin-right: 0.33rem;
    background-color: rgba(86, 140, 250, 1);
    border-radius: 50%;
  }

  .setting {
    img {
      width: 1.69rem;
      height: 1.69rem;
    }
  }

  .count-menu {
    font-family: SourceHanSansSC-bold;
    font-size: 0.88rem;
    line-height: 1.25rem;
    color: rgba(16, 16, 16, 1);
  }

  .student-auth {
    width: 21.38rem;
    height: 3.75rem;
    margin: 0 auto;
    margin-top: 1.19rem;
    background-color: rgba(252, 235, 212, 1);
    border-radius: 3.13rem;
  }

  .auth-text {
    height: 1.88rem;
    font-family: ZKWenYi-regular;
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: rgba(242, 166, 89, 1);
  }

  .auth-text-more {
    height: 1.06rem;
    font-family: SourceHanSansSC-regular;
    font-size: 0.75rem;
    line-height: 1.06rem;
    color: rgba(242, 166, 89, 1);
  }

  .go-auth-btn {
    width: 4.75rem;
    height: 1.88rem;
    margin-right: 1.31rem;
    line-height: 1.25rem;
    background: linear-gradient(
      -87.4deg,
      rgba(255, 160, 92, 1) 2.52%,
      rgba(255, 201, 138, 1) 97.61%
    );
    border-radius: 0.94rem;

    .go-auth {
      font-family: SourceHanSansSC-regular;
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 1);
      text-align: center;
    }
  }
}

.bottom-item {
  width: 21.38rem;
  height: 3.38rem;
  margin-top: 0.88rem;
  background-color: #f2f2f2;
  border-radius: 1rem;

  text {
    height: 1.25rem;
    font-family: SourceHanSansSC-regular;
    font-size: 0.88rem;
    line-height: 1.25rem;
    color: rgba(0, 0, 0, 1);
    text-align: left;
  }
}
</style>
